<template>
  <div class="RiderCertification" v-show="isLook">
    <myHead title="骑手认证"></myHead>
    <div class="wrap">
      <div class="boxWrap">
        <div class="box">
          <img src="../../../static/img/fabuxing.png" alt="">
          <p>姓&emsp;&emsp;名</p>
          <input type="text" placeholder="请输入姓名" v-model="Uname">
        </div>
        <div class="box">
          <img src="../../../static/img/fabuxing.png" alt="">
          <p>手机号码</p>
          <input type="text" placeholder="手机号码" v-model="Utel">
        </div>
        <div class="box">
          <img src="../../../static/img/fabuxing.png" alt="">
          <p>学校名称</p>
          <p style="width: 2.3rem;color: #6C6C6C;margin-right: 0" @click="show = true">{{school.text?school.text:'请选择学校'}}</p>
        </div>
        <div class="box">
          <img src="../../../static/img/fabuxing.png" alt="">
          <p>身份证号码</p>
          <input type="text" placeholder="请输入身份证号码" v-model="IDcode">
        </div>
        <div class="bot">
          <div class="bot_sel bot_sel1">
            <div class="bot_item" v-for="(x,y) in isType" @click="typeShow(y)">
              <p :class="x.is?'seled':''"></p><p>{{x.txt}}</p>
            </div>
          </div>
        </div>
        <div class="bot">
          <div class="bot_sel bot_sel1">
            <div class="bot_item" v-for="(x,y) in cardType" @click="cardTypes(y)">
              <p :class="x.is?'seled':''"></p><p>{{x.txt}}</p>
            </div>
          </div>
        </div>
        <div class="zjphoto" v-if="cardType[0].is">
            <div class="zj_lWrap">
              <div class="zj_l">
                <img :src="photos[0]" alt="">
                <input type="file" @change="file0">
              </div>
              <div class="zj_text">
                <p>点击上传</p>
                <p>人像面</p>
              </div>
              <div class="black" v-show="percentage0<100 && percentage0>0"><van-loading color="#FF7106" size=".16rem" /><p>{{percentage0}}%</p></div>
            </div>
            <div class="zj_lWrap">
              <div class="zj_r">
                <img :src="photos[1]" alt="">
                <input type="file" @change="file1">
              </div>
              <div class="zj_text">
                <p>点击上传</p>
                <p>国徽面</p>
              </div>
              <div class="black" v-show="percentage1<100 && percentage1>0"><van-loading color="#FF7106" size=".16rem" /><p>{{percentage1}}%</p></div>
            </div>
        </div>
        <div class="zjphoto" v-if="cardType[1].is">
          <div class="zj_lWrap">
            <div class="zj_l">
              <img :src="photos[2]" alt="">
              <input type="file" @change="file2">
            </div>
            <div class="zj_text">
              <p>点击上传</p>
              <p>学生证</p>
            </div>
            <div class="black" v-show="percentage2<100 && percentage2>0"><van-loading color="#FF7106" size=".16rem" /><p>{{percentage2}}%</p></div>
          </div>
          <div class="zj_lWrap">
            <div class="zj_r">
              <img :src="photos[3]" alt="">
              <input type="file" @change="file3">
            </div>
            <div class="zj_text">
              <p>点击上传</p>
              <p>手持学生证</p>
            </div>
            <div class="black" v-show="percentage3<100 && percentage3>0"><van-loading color="#FF7106" size=".16rem" /><p>{{percentage3}}%</p></div>
          </div>
        </div>
      </div>
      <div class="btn" @click="submit">提交申请</div>
    </div>
    <!-- 选择学校 -->
    <van-popup v-model="show" position="bottom">
      <van-picker title="学校" show-toolbar :columns="columns.list" @confirm="onConfirm" @cancel="onCancel" @change="onChange"/>
    </van-popup>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "RiderCertification",
    components: {
      myHead
    },
    data(){
      return {
        isLook:false,
        time:'获取验证码',
        isType:[{txt:'外卖专员',is:true},{txt:'跑腿专员',is:false}],
        cardType:[{txt:'身份证认证',is:true},{txt:'学生证认证',is:false}],
        photos:['../../../static/img/sfz001.png','../../../static/img/sfz002.png','../../../static/img/xsz222.png','../../../static/img/xsz111.png'],
        show: false,
        columns: {list:[],id:[]}, // 学校列表
        school:{text:false,id:''}, // 当前学校
        percentage0:0, // 身份证人像面百分比进度
        percentage1:0, // 身份证国徽面百分比进度
        percentage2:0, // 学生证正面百分比进度
        percentage3:0, // 手持学生证百分比进度
        photoList:[{url:'',look:false},{url:'',look:false},{url:'',look:false},{url:'',look:false},{url:'',look:false}], // base64容器
        Uname:'', // 姓名
        Utel:'', // 手机号
        IDcode:'', // 身份证号码
        thisRz:-1, // 当前认证显示下标
      }
    },
    beforeCreate(){
      this.$myAxios('index/Horseman/condition','post',{
        user_id:this.$myStorage.query()
      }).then(res=>{
        console.log(res.data);
        if (res.data.state == '1') {
          var status;
          if (res.data.courier) {
            if (res.data.courier.status){
              status = res.data.courier.status*1;
            }
            this.$router.replace({
              name:'CertificationStatus',
              query:{
                title:'骑手认证',
                status:status,
                name:'RiderCertification'
              }
            })
          }else {
            this.$nextTick(res=>{
              this.isLook = true;
            })
          }
        } else {
          this.$myNotice('网络出现了问题~',1500)
        }
      })
    },
    created(){
      this.$myAxios('index/Recruitment/school','post',{}).then(res => {
        console.log(res);
        if (res.data.state == 1) {
          for (var i of res.data.school) {
            this.columns.list.push(i.agent_school_name);
            this.columns.id.push(i.id)
          }
        }else {
          this.$myNotice('获取学校列表失败!',1500);
        }
      });
    },
    methods:{
      typeShow(index){
        for (var i of this.isType) {
          i.is = false;
        }
        this.isType[index].is = true;
      },
      cardTypes(index){
        if (this.thisRz == index){return}
        for (var i of this.cardType) {
          i.is = false;
        }
        this.thisRz = index;
        this.cardType[index].is = true;
        this.photoList = [{url:'',look:false},{url:'',look:false},{url:'',look:false},{url:'',look:false},{url:'',look:false}];
        this.percentage0 = 0;
        this.percentage1 = 0;
        this.percentage2 = 0;
        this.percentage3 = 0;
        this.photos = ['../../../static/img/sfz001.png','../../../static/img/sfz002.png','../../../static/img/xsz222.png','../../../static/img/xsz111.png'];
      },
      onConfirm(value, index) {
        this.show = false;
        // console.log(`当前值：${value}, 当前索引：${index}`);
        this.school.text = value;
        this.school.id = this.columns.id[index];
      },
      onChange(picker, value, index) {
        // console.log(`当前值：${value}, 当前索引：${index}`);
      },
      onCancel() {
        this.show = false;
        // console.log('取消');
      },
      file0(files){
        if (!files.target.files[0]){ this.photoList[0] = {url:"",look:false}; return}
        var vThis = this;
        this.percentage0 = 0.1;
        var src = files.target.files[0];
        var lq = new FileReader();
        lq.readAsDataURL(src);
        lq.onload = res=>{
          this.photos[0] = res.target.result;
        };
        var file = new FormData();
        file.append('file',src);
        $.ajax({
          type: "POST",
          url: "http://take.zhitiaoxiaoyuan.com/index/Recruitment/uploading",
          data: file , //这里上传的数据使用了formData 对象
          processData: false,
          contentType: false, //必须false才会自动加上正确的Content-Type
          //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
          xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
              xhr.upload.onprogress = function(progress) {
                if (progress.lengthComputable) {
                  vThis.percentage0 = (progress.loaded / progress.total * 100).toFixed(1);
                  // progressBar.max = progress.total;
                  // progressBar.value = progress.loaded;
                }
              };
              xhr.upload.onloadstart = function() {
                // console.log('started...');
              };
            }
            return xhr;
          }
        }).done(function(resp) {
          vThis.photoList[0] = {url:resp,look:true};
          // alert('完成！');
        }).fail(function(err) {
          vThis.photoList[0] = {url:"",look:false};
          // alert('无法连接服务器！')
        })
      },
      file1(files){
        if (!files.target.files[0]){ this.photoList[1] = {url:"",look:false}; return}
        var vThis = this;
        this.percentage1 = 0.1;
        var src = files.target.files[0];
        var lq = new FileReader();
        lq.readAsDataURL(src);
        lq.onload = res=>{
          this.photos[1] = res.target.result;
        };
        var file = new FormData();
        file.append('file',src);
        $.ajax({
          type: "POST",
          url: "http://take.zhitiaoxiaoyuan.com/index/Recruitment/uploading",
          data: file , //这里上传的数据使用了formData 对象
          processData: false,
          contentType: false, //必须false才会自动加上正确的Content-Type
          //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
          xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
              xhr.upload.onprogress = function(progress) {
                if (progress.lengthComputable) {
                  vThis.percentage1 = (progress.loaded / progress.total * 100).toFixed(1);
                  // progressBar.max = progress.total;
                  // progressBar.value = progress.loaded;
                }
              };
              xhr.upload.onloadstart = function() {
                // console.log('started...');
              };
            }
            return xhr;
          }
        }).done(function(resp) {
          vThis.photoList[1] = {url:resp,look:true};
          // alert('完成！');
        }).fail(function(err) {
          vThis.photoList[1] = {url:"",look:false};
          // alert('无法连接服务器！')
        })
      },
      file2(files){
        if (!files.target.files[0]){ this.photoList[2] = {url:"",look:false}; return}
        var vThis = this;
        this.percentage2 = 0.1;
        var src = files.target.files[0];
        var lq = new FileReader();
        lq.readAsDataURL(src);
        lq.onload = res=>{
          this.photos[2] = res.target.result;
        };
        var file = new FormData();
        file.append('file',src);
        $.ajax({
          type: "POST",
          url: "http://take.zhitiaoxiaoyuan.com/index/Recruitment/uploading",
          data: file , //这里上传的数据使用了formData 对象
          processData: false,
          contentType: false, //必须false才会自动加上正确的Content-Type
          //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
          xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
              xhr.upload.onprogress = function(progress) {
                if (progress.lengthComputable) {
                  vThis.percentage2 = (progress.loaded / progress.total * 100).toFixed(1);
                  // progressBar.max = progress.total;
                  // progressBar.value = progress.loaded;
                }
              };
              xhr.upload.onloadstart = function() {
                // console.log('started...');
              };
            }
            return xhr;
          }
        }).done(function(resp) {
          vThis.photoList[2] = {url:resp,look:true};
          // alert('完成！');
        }).fail(function(err) {
          vThis.photoList[2] = {url:"",look:false};
          // alert('无法连接服务器！')
        })
      },
      file3(files){
        if (!files.target.files[0]){ this.photoList[3] = {url:"",look:false}; return}
        var vThis = this;
        this.percentage3 = 0.1;
        var src = files.target.files[0];
        var lq = new FileReader();
        lq.readAsDataURL(src);
        lq.onload = res=>{
          this.photos[3] = res.target.result;
        };
        var file = new FormData();
        file.append('file',src);
        $.ajax({
          type: "POST",
          url: "http://take.zhitiaoxiaoyuan.com/index/Recruitment/uploading",
          data: file , //这里上传的数据使用了formData 对象
          processData: false,
          contentType: false, //必须false才会自动加上正确的Content-Type
          //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
          xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            if (xhr.upload) {
              xhr.upload.onprogress = function(progress) {
                if (progress.lengthComputable) {
                  vThis.percentage3 = (progress.loaded / progress.total * 100).toFixed(1);
                  // progressBar.max = progress.total;
                  // progressBar.value = progress.loaded;
                }
              };
              xhr.upload.onloadstart = function() {
                // console.log('started...');
              };
            }
            return xhr;
          }
        }).done(function(resp) {
          vThis.photoList[3] = {url:resp,look:true};
          // alert('完成！');
        }).fail(function(err) {
          vThis.photoList[3] = {url:"",look:false};
          // alert('无法连接服务器！')
        })
      },
      // 提交认证
      submit(){
        // 身份证正则匹配
        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if (!/^[\u2E80-\u9FFF]+$/.test(this.Uname)){
          this.$myNotice('请输入合法的姓名~',1500);return
        }else if (!/^1[3-9][0-9]{9}$/.test(this.Utel)) {
          this.$myNotice('请检查手机号~',1500);return
        }else if (!this.school.text){
          this.$myNotice('请选择学校~',1500);return
        }else if (!reg.test(this.IDcode)) {
          this.$myNotice('请检查身份证号码格式~',1500);return
        }
        var look = 0;
        for (let i of this.photoList) {
          if (!i.look) {
            look+=1;
          }
        }
        if (look<2) {this.$myNotice('请检查认证图片是否上传~',1500);return}
        var shopType = -1;
        for (var i in this.isType) {
          if (this.isType[i].is) {
            shopType = i;
            break;
          }
        }
        // 传给后台的认证图片
        var cardArr = [];
        if (this.cardType[0].is) {
            cardArr = [this.photoList[0].url,this.photoList[1].url,'']
        }else {
            cardArr = [this.photoList[2].url,'',this.photoList[3].url]
        }
        this.$myAxios('index/Horseman/horseman','post',{
          user_id:this.$myStorage.query(),
          card_image1:cardArr[0],
          card_image2:cardArr[1],
          card_image3:cardArr[2],
          truename:this.Uname,
          phone:this.Utel,
          apply_reply:'',
          card_number:this.IDcode,
          type:shopType,
          school_id:this.school.id
        }).then(res=>{
          console.log(res);
          if (res.data.state == '1'){
            this.$myNotice('审核已提交~',3000)
            this.$myAxios('index/Horseman/condition','post',{
              user_id:this.$myStorage.query()
            }).then(res=>{
              console.log(res.data);
              if (res.data.state == '1') {
                var status;
                if (res.data.courier) {
                  if (res.data.courier.status){
                    status = res.data.courier.status*1;
                  }
                  this.$router.replace({
                    name:'CertificationStatus',
                    query:{
                      title:'骑手认证',
                      status:status,
                      name:'RiderCertification'
                    }
                  })
                }else {
                  this.$nextTick(res=>{
                    this.isLook = true;
                  })
                }
              } else {
                this.$myNotice('网络出现了问题~',1500)
              }
            })
          }else {
            this.$myNotice('网络走丢啦~',1500)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .RiderCertification {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    background-color: #FFFFFF;
    padding: .5rem 0 0;
  }
  .boxWrap {
    margin-bottom: .1rem;
    background-color: #FFFFFF;
  }
  .box {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding: 0 .15rem;
    border-bottom: .01rem solid #F5F5F5;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .box>img {
    width: .05rem;
    height: .05rem;
    margin-right: .1rem;
  }
  .box>p,.up_left>div>p {
    width: .8rem;
    text-align: left;
    font-size:.14rem;
    font-family:Source Han Sans CN;
    font-weight:400;
    color: #1E1E1E;
    margin-right: .15rem;
  }
  .box>input {
    width: 2.1rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    line-height: .2rem;
    outline: none;
    border: none;
    padding-left: 0;
  }
  .box>input::placeholder {
    color: #6C6C6C;
  }

  .box1>input {
    width: 1.5rem;
  }
  .box1>div {
    width:.8rem;
    height:.23rem;
    border:.01rem solid rgba(255,112,4,1);
    border-radius:.11rem;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #FF7106;
    text-align: center;
    line-height: .23rem;
  }
  .obtain {
    border-color: #999999 !important;
    color: #999999 !important;
  }

  .bot {
    background-color: #FFFFFF;
  }
  .bot_sel {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding: 0 .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: .01rem solid #F5F5F5;
  }
  .bot_sel1 {
    justify-content: flex-start;
  }
  .bot_sel1>div {
    margin-right: .26rem;
  }
  .bot_item {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .bot_item>p:nth-child(1) {
    width:.09rem;
    height:.09rem;
    background:rgba(178,178,178,1);
    border-radius:50%;
    margin-right: .05rem;
  }
  .bot_item>p:nth-child(2) {
    font-size:.13rem;
    font-family:Source Han Sans CN;
    font-weight:400;
    color: #1E1E1E;
  }
  .seled {
    background-color: #FF7107 !important;
  }
  .btn {
    width:3.05rem;
    height:.5rem;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    border-radius:.24rem;
    font-size:.14rem;
    font-family:Source Han Sans CN;
    font-weight:400;
    color: #FFFFFF;
    line-height: .5rem;
    text-align: center;
    margin: .2rem auto;
  }

  .zjphoto {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-around;
    margin-bottom: .5rem;
    margin-top: .2rem;
  }
  .zj_l,.zj_r {
    width: 1.5rem;
    height: .9rem;
    position: relative;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .zj_l>img,.zj_r>img {
    width: 90%;
    max-height: .9rem;
  }
  .zj_l>input,.zj_r>input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
  }

  .zj_lWrap {
    position: relative;
    box-shadow:0 .03rem .08rem 0 rgba(209, 209, 209, 0.35);
    border-radius:.02rem;
  }
  .zj_text {
    width: 100%;
    height: .25rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .zj_text>p:nth-child(1) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-right: .05rem;
    color: #666666;
  }
  .zj_text>p:nth-child(2) {
    color: #FF7106;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
  }
  /* 三级联动插件自适应处理 */
  >>> .van-cell {
    color: #999999 !important;
    font-size: .15rem;
    padding: 0;
    line-height: .24rem;
  }

  >>> .van-popup {
    height: 2.7rem !important;
  }

  >>> .van-picker__columns {
    height: 2.2rem !important;
  }

  >>> .van-picker-column__wrapper > li {
    height: .44rem !important;
    line-height: .44rem !important;
  }

  >>> .van-picker-column {
    font-size: .16rem !important;
  }

  >>> .van-picker__toolbar {
    height: .44rem;
    line-height: .44rem;
  }

  >>> .van-picker__cancel {
    font-size: .14rem !important;
    padding: 0 .16rem !important;
  }

  >>> .van-picker__confirm {
    font-size: .14rem !important;
    padding: 0 .16rem !important;
  }

  >>> .van-picker__title {
    font-size: .16rem;
  }
  >>> .van-cell__right-icon {
    margin-left: .05rem;
    height: .24rem;
    font-size: .16rem;
    line-height: .24rem;
  }
  /* 上传图片百分比 */
  .black {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    font-size: .14rem;
    color: #FF7106;
  }
  .black>p {
    margin-left: .05rem;
  }
</style>
